<!--
 * @Author: xiezhiquan3878
 * @Date: 2024-06-23 14:21:51
 * @LastEditors: zhayang 1063975710@qq.com
 * @LastEditTime: 2024-07-03 21:42:56
 * @FilePath: \heart-backed\src\views\banner\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="app-container fit bg-#fff column relative">
    <div v-show="showType === 'list'">
      <div class="title">
        {{ info.title }}
        <span>模型ID：{{ info.model_uniqueid }}</span>
      </div>
      <el-tabs v-model="activeName">
        <el-tab-pane
          :label="`问答列表 (${info.collect_faq_count})`"
          name="first"
        >
          <div class="model-list-header h-col-auto flex justify-between">
            <el-button
              type="primary"
              size="small"
              icon="el-icon-plus"
              :loading="loading"
              @click="add"
            >
              新增问答
            </el-button>
            <el-button
              type="primary"
              size="small"
              :loading="loading"
              @click="aiCreate"
            >
              AI生成问答
            </el-button>
            <div class="flex justify-end h-col">
              <div class="w-300">
                <Input
                  v-model="params.title"
                  show
                  placeholder="请输入关键词"
                />
              </div>
              <div class="m-l-10">
                <el-button
                  type="primary"
                  size="small"
                  :loading="loading"
                  @click="searchList"
                >
                  查询
                </el-button>
              </div>
            </div>
          </div>
          <div
            class="model-list-body h-col m-t-14 flex flex-col flex-nowrap"
            style="height: calc(100vh - 230px); flex: none"
          >
            <BaseTable
              :columns="column"
              :loading="loading"
              :table-data="tableData"
            >
              <template #action="{ row }">
                <div class="flex">
                  <el-button
                    type="text"
                    size="small"
                    @click="edit(row)"
                  >
                    编辑
                  </el-button>
                  <el-button
                    type="text"
                    size="small"
                    @click="del(row)"
                  >
                    删除
                  </el-button>
                </div>
              </template>
            </BaseTable>
            <div class="col-auto m-y-15 p-l-4">
              <Pagination
                :pagination-data="pageData"
                @paginationFun="changePage"
              />
            </div>
          </div>
        </el-tab-pane>

        <el-tab-pane
          :label="`未匹配问题 (${info.collect_question_count})`"
          name="second"
        >
          <unmatch-list
            ref="unmatch"
            @dispose="disposeClick"
            @total="setTotal"
          />
        </el-tab-pane>
      </el-tabs>
    </div>

    <add-question
      v-show="showType === 'det'"
      ref="addQuestion"
      class="detail"
      @cancel="cancel"
      @getList="success"
    />
    <!-- 处理 -->
    <dispose
      v-show="showType === 'dispose'"
      ref="dispose"
      @cancel="cancel"
      @success="disposeSuccess"
    />
    <!-- ai生成 -->
    <ai-add
      :pop-show="showAi"
      @cancel="cancelAi"
      @success="successAi"
    />
  </div>
</template>

<script>
import { Input } from '@/components/bmp/form/index'
import BaseTable from '@/components/bmp/table/index.vue'
import Pagination from '@/components/pagination/pagination'
import { getFaqList, modelDet, delQuestion } from '@/api/model'
import unmatchList from './components/unmatchList.vue'
import addQuestion from './components/add-question.vue'
import dispose from './components/dispose.vue'
import aiAdd from './components/ai-add.vue'
export default {
  components: {
    Input,
    BaseTable,
    unmatchList,
    Pagination,
    addQuestion,
    dispose,
    aiAdd
  },
  data() {
    return {
      showAi: false,
      activeName: '',
      pageData: {
        currentPage: 1,
        pageSize: 10,
        total: 0
      },
      info: {},
      params: {
        title: ''
      },
      column: [
        {
          prop: 'question',
          label: '问题'
        },
        {
          prop: 'answer_text',
          label: '答案'
        },
        {
          prop: 'select_count',
          label: '触发次数'
        },
        {
          prop: 'create_datetime',
          label: '创建时间'
        },
        {
          prop: 'update_datetime',
          label: '更新时间'
        },
        {
          prop: 'action',
          label: '操作'
        }
      ],
      tableData: [],
      loading: false,
      dialogVisible: false,
      videoUrl: 'https://www.runoob.com/try/demo_source/movie.mp4',
      videoShow: false,
      showType: '',
      unTotal: '',
      tableAllData: []
    }
  },
  watch: {
    $route: {
      handler(val) {
        console.log(val)
        this.activeName = val.query.type
      },
      deep: true,
      immediate: true
    }
  },
  created() {
    const type = this.$route.query.type
    if (type == 1) {
      //
    }
    this.getDet()
    this.searchList()
  },
  mounted() {
    this.$nextTick(() => {
      this.$refs.unmatch.getData()
    })
  },
  methods: {
    disposeSuccess() {
      // 处理成功
      this.showType = 'list'
      this.searchList()
      this.$nextTick(() => {
        this.$refs.addQuestion.init()
      })
    },
    successAi() {
      this.showAi = false
      this.getDet()
      this.searchList()
    },
    setTotal(val) {
      this.unTotal = val
    },
    success() {
      this.showType = 'list'
      this.getDet()
      this.searchList()
    },
    del(row) {
      this.$confirm('此操作将永久删除此数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          delQuestion({
            model_uniqueid: this.$route.query.uid,
            faq_uniqueid: row.faq_uniqueid
          }).then((res) => {
            this.searchList()
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
          })
        })
        .catch(() => {})
    },
    cancel() {
      this.showType = 'list'
    },
    disposeClick(row) {
      this.showType = 'dispose'
      this.$nextTick(() => {
        this.$refs.dispose.init(row)
      })
    },
    searchList() {
      this.pageData.currentPage = 1
      this.getData()
    },
    getDet() {
      modelDet({ model_uniqueid: this.$route.query.uid }).then((res) => {
        this.info = res.data
      })
    },
    changePage(val) {
      this.pageData.currentPage = val.currentPage
      this.pageData.pageSize = val.pageSize
      this.setData()
    },
    setData() {
      const e = this.pageData.currentPage * this.pageData.pageSize
      const s = e - this.pageData.pageSize
      this.tableData = this.tableAllData.slice(s, e)
    },
    getData() {
      this.loading = true
      getFaqList({
        key: this.params.title,
        model_uniqueid: this.$route.query.uid
      })
        .then((res) => {
          if (res && res.code === 0) {
            this.tableAllData = res.data
            this.pageData.total = res.data.length
            this.setData()
          }
        })
        .catch(() => {
          //
          this.$message.error('获取错误，请重试')
        })
        .finally(() => {
          this.showType = 'list'
          this.loading = false
        })
    },
    showVideo(row) {
      //
      this.videoShow = true
    },
    closeMask() {
      this.videoShow = false
    },
    add() {
      this.showType = 'det'
      this.$nextTick(() => {
        this.$refs.addQuestion.init()
      })
    },
    edit(row) {
      this.showType = 'det'
      this.$nextTick(() => {
        this.$refs.addQuestion.init(row)
      })
    },
    aiCreate() {
      this.showAi = true
    },
    cancelAi() {
      this.showAi = false
    }
  }
}
</script>
<style lang="scss" scoped>
.app-container {
  padding: 40px 20px 20px;
}

.title {
  font-weight: 600;
  font-size: 24px;
  color: #1c1f23;
  line-height: 28px;
  margin-bottom: 12px;

  span {
    font-weight: 400;
    font-size: 10px;
    color: #9e9e9e;
  }
}

.menu-item {
  cursor: pointer;

  &:hover {
    background: #f4f5f9;
    border-radius: 4px 4px 4px 4px;
  }
}

.model-video {
  object-fit: cover;
}

::v-deep {
  .el-tabs__nav-wrap::after {
    height: 0;
  }
}

.search-box {
  width: 300px;
  height: 32px;
  background: #ffffff;
  border-radius: 3px;
  border: 1px solid #dcdcdc;
  position: relative;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.4);
  padding-right: 36px;

  .z-input {
    width: 100%;
    height: 100%;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.4);
    border: 0;
    overflow: unset;
    padding-left: 7px;
    outline: none;
  }

  .iconfont {
    position: absolute;
    right: 5px;
    top: 5px;
    color: #797979;
  }
}

.search-btn {
  padding: 7px 17px;
  margin-left: 12px;
}

.search-btn:hover {
  background: rgba(97, 225, 209, 0.7);
}

// .del-btn {
//   background: #ff3f40;
//   font-weight: 400;
//   font-size: 14px;
//   color: #ffffff;
// }
</style>
